<template>
  <div class="publicpageview">
    <div class="publicformview">
      <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="日期：" prop="incomeDate">
              <el-date-picker clearable size="small"
                              v-model="listQuery.incomeDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!--                    <el-col :span="4">-->
          <!--                        <el-form-item label="审核标记：" prop="status">-->
          <!--                            <el-select v-model="listQuery.status" clearable>-->
          <!--                                <el-option label="启用" value="0" key="1"></el-option>-->
          <!--                                <el-option label="禁用" value="1" key="0"></el-option>-->
          <!--                            </el-select>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->
          <el-col :span="4">
            <el-form-item label="区域：" prop="areaId">
              <el-select v-model="listQuery.areaId" clearable >
                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                           :key="item.did"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="部门：" prop="deptId">
              <el-select v-model="listQuery.deptId" clearable>
                <el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
                           :key="item.aid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
              <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="publitableview">
      <el-button type="primary" size="mini" @click="handleAddUser('add')">凭证录入</el-button>
      <el-button type="danger"  icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDeletes">删除</el-button>

      <el-table :data="list" border fit highlight-current-row size="mini" @selection-change="handleSelectionChange">
        <!--                <el-table-column align="center" label="日期" prop="id"/>-->
        <!--              <el-table-column align="center" label="凭证号" prop="id"/>-->
        <!--                <el-table-column align="center" label="交租方式" prop="name"/>-->
        <!--                <el-table-column align="center" label="摘要" prop="id"/>-->
        <!--                <el-table-column align="center" label="科目名称" prop="id"/>-->
        <!--                <el-table-column align="center" label="对方科目" prop="id"/>-->
        <!--                <el-table-column align="center" label="借方金额" prop="id"/>-->
        <!--                <el-table-column align="center" label="贷方金额" prop="id"/>-->
        <!--                <el-table-column align="center" label="区房屋管理单位" prop="id"/>-->
        <!--                <el-table-column align="center" label="管理部（分中心）" prop="id"/>-->
        <!--                <el-table-column align="center" label="录入员" prop="id"/>-->
        <!--                <el-table-column align="center" label="录入日期" prop="id"/>-->

        <!--              <el-table-column label="ID" align="center" prop="id" />-->
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="凭证号（收）" align="center" prop="voucherCodeIn" width="180"/>
        <el-table-column label="凭证号（支）" align="center" prop="voucherCodeOut" width="180"/>
        <el-table-column label="收租日期" align="center" prop="incomeDate" />
<!--        <el-table-column label="收租方式" align="center" prop="type" :formatter="hanldetype"/>-->
        <el-table-column label="收租方式" align="center" prop="payeename"/>
        <el-table-column label="区域" align="center" prop="areaName" />
        <el-table-column label="部门" align="center" prop="deptName" />
        <el-table-column label="银行存款" align="center" prop="bankCk" />
        <el-table-column label="银行名称" align="center" prop="bankName" />
        <el-table-column label="对方科目明细账" align="center" prop="dfkmDetail" />
        <el-table-column label="租金收入" align="center" prop="rentalIncome" />
        <el-table-column label="借方金额" align="center" prop="debitAmount" />
        <el-table-column label="贷方金额" align="center" prop="creditAmount" />
        <el-table-column align="center" label="录入员" prop="createBy"/>
        <el-table-column align="center" label="录入日期" prop="createTime"/>


        <el-table-column align="center" label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <!--                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'shenhe')"-->
            <!--                            v-if="true">审核</el-button>-->
            <!--                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'quxiaoshenhe')"-->
            <!--                            v-else>取消审核</el-button>-->
            <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
            <!--                        <el-button type="text" size="mini" @click="handleUpdate(scope.row,'details')">详情</el-button>-->
            <el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]"
                       :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                       small></el-pagination>
      </div>
    </div>

    <el-dialog
        :title="isAdd == 'add' ? '凭证录入' : isAdd == 'update' ? '修改凭证'  : '银行租金凭证详情'"
        :visible.sync="dialogVisible" width="75%" :before-close="handleClose">
      <el-form :model="formData" ref="dataForm" class="demo-ruleForm" size="mini" :inline="true">

        <el-row :gutter="20" style="padding: 0 20px;">

          <el-col :span="6">
            <el-form-item label="日期：" prop="incomeDate">
              <el-date-picker v-model="formData.incomeDate" type="date" placeholder="年/月/日">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="交租方式：" prop="type">
<!--              <el-select v-model="formData.type" :disabled="true">-->
<!--                <el-option-->
<!--                    v-for="item in typelist"-->
<!--                    :key="item.id"-->
<!--                    :label="item.label"-->
<!--                    :value="item.id">-->
<!--                </el-option>-->
<!--              </el-select>-->
              <el-input v-model="formData.payeename" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="区域：" prop="districtId">
              <el-select v-model="formData.areaId">
                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                           :key="item.did"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="部门" prop="houseAdminId">
              <el-select v-model="formData.deptId">
                <el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
                           :key="item.aid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="tableView">
          <div class="title">POS收入凭证录入窗口</div>

          <div style="padding: 0 20px;margin-top: 10px;">
            <el-row>
              <el-col :span="3">类别</el-col>
              <el-col :span="4">摘要</el-col>
              <el-col :span="3">科目名称</el-col>
              <el-col :span="4">科目明细</el-col>
              <el-col :span="5">借方金额</el-col>
              <el-col :span="5">贷方金额</el-col>
            </el-row>
            <el-row style="border-bottom: none;">
              <el-col :span="3">银行存款</el-col>
              <el-col :span="4" style="height: 49px;">
                <el-form-item prop="key">
                  <el-input v-model="formData.bankCk"></el-input>
                </el-form-item></el-col>
              <el-col :span="3">银行名称</el-col>
              <el-col :span="4" style="height: 49px;">
                <el-form-item prop="status">
                  <el-select v-model="formData.bankName" style="width: 178px;" clearable>
                    <el-option v-for="item in banklist" :label="item.label" :value="item.label"
                               :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <!--                              贷方金额-->
                <el-form-item prop="key">
                  <el-input v-model="formData.creditAmount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <!--                              借方金额-->
                <el-form-item prop="key">
                  <el-input v-model="formData.debitAmount"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>

              <el-col :span="3">对方科目明细账</el-col>
              <el-col :span="4">
                <el-form-item prop="key">
                  <el-input v-model="formData.dfkmDetail"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">租金收入</el-col>
              <el-col :span="4">
                <el-form-item prop="key">
                  <el-input v-model="formData.rentalIncome"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="key">
                  <el-input v-model="formData.debitAmount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="key">
                  <el-input v-model="formData.creditAmount"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="7">凭证号：{{formData.voucherCodeIn}}</el-col>

              <el-col :span="7">录入员：{{formData.createBy}}</el-col>

              <el-col :span="10">录入日期：{{formData.createTime}}</el-col>
            </el-row>
          </div>

        </div>

      </el-form>
      <span slot="footer" class="dialog-footer">

                <el-button @click="handleClose" size="medium" v-if="isAdd == 'shenhe' || isAdd == 'quxiaoshenhe'">返
                    回</el-button>
                <el-button type="primary" @click="handleClose" size="medium" v-if="isAdd == 'details'">返
                    回</el-button>

                <el-button type="primary" @click="handleSubmitClick" size="medium" v-else>{{isAdd == 'add' ? '保 存' :
                    isAdd ==
                    'update' ? '保 存' : isAdd == 'shenhe' ? '审 核' : '取消审核'}}</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import {addDetails, delDetails, listDetails, updateDetails} from "@/api/caiwu/cwRentalIncomeDetails";

let arr = [];
let treeArr = [];

import { listResource, allocResource } from '@/api/index'
import { Message } from 'element-ui'
import { getArea, getHouseAdmin, getBlockGroup, getBlockByGroup, upload } from '@/api/common'
import { listAll } from '@/api/repair'
import moment from 'moment';
import {deleteRole} from "@/api/system";
import * as dateUils from "@/utils/dateUtils";
export default {
  name: "AccommodationManagementIndex",

  data() {
    return {
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        type:2,
        incomeDate: null,
        areaId: null,
        deptId: null
      },
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,

      total: 0,

      list: [

      ],
      dialogVisible: false,
      isAdd: 'add',
      formData: {
        type:2,
        payeename:"划转",
      },
      areaList: [],
      houseAdminList: [],
      houseFormAdminList: [],
      typelist:[{id:1,label:'银行'},{id:2,label:'POS'},{id:3,label:'微信'}],
      banklist:[{id:1,label:'天津银行第一中心支行'},{id:2,label:'天津银行第六中心支行'}]

    };
  },

  computed: {

  },
  watch:{
    'formData.areaId'(val){
      var str1="";
      var str2="";
      var str3="划转";
      for(var i in this.areaList){
        if(this.areaList[i].did===val){
          str1=this.areaList[i].dname
        }
      }
      for(var i in this.houseAdminList){
        if(this.houseAdminList[i].aid===this.formData.deptId){
          str2=this.houseAdminList[i].aname
        }
      }

      this.formData.bankCk=str1+str2+str3
      this.formData.dfkmDetail=str1+str2+str3
    },
    'formData.deptId'(val){
      var str1="";
      var str2="";
      var str3="划转";
      for(var i in this.areaList){
        if(this.areaList[i].did===this.formData.areaId){
          str1=this.areaList[i].dname
        }
      }
      for(var i in this.houseAdminList){
        if(this.houseAdminList[i].aid===val){
          str2=this.houseAdminList[i].aname
        }
      }

      this.formData.bankCk=str1+str2+str3
      this.formData.dfkmDetail=str1+str2+str3
    },
  },
  mounted() {
    this.getList();
    this.getCommon();
    this.getHouseAdmin()
    this.getFormHouseAdmin()

  },


  methods: {

    getCommon() {
      getArea().then(res => {
        this.areaList = res.data
      })
    },

    handleQuchange(val) {
      this.listQuery.houseAdminId = null;
      if (val) {
        this.getHouseAdmin(val);

      } else {
        this.houseAdminList = [];
      }
    },

    handleFormQuchange(val) {
      this.formData.houseAdminId = null;
      if (val) {
        this.getFormHouseAdmin(val);

      } else {
        this.houseFormAdminList = [];
      }
    },

    getHouseAdmin(val) {
      getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
        this.houseAdminList = res.data.list;
      })
    },
    getFormHouseAdmin(val) {
      getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
        this.houseFormAdminList = res.data.list;
      })
    },

    handleSubmitClick() {
      const { formData } = this;
      if (this.isAdd == 'add') {
        console.log("add",this.formData)
        addDetails(this.formData).then(response => {
          Message({
            message:  '操作成功',
            type: "success",
            duration: 3 * 1000,
          });
          this.dialogVisible = false;
          this.getList()
        })
      }
      if (this.isAdd == 'update' || this.isAdd == 'details') {
        updateDetails(this.formData).then(response => {
          Message({
            message:  '操作成功',
            type: "success",
            duration: 3 * 1000,
          });
          this.dialogVisible = false;
          this.getList()
        })
      }

    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearch() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    getList() {
      // listAll(this.listQuery).then((response) => {
      //     this.list = response.data.list;
      //     this.total = response.data.total;
      // });

      listDetails(this.listQuery).then(response=>{
        this.list = response.data.list;
        this.total = response.data.total;
      })
    },
    resetForm(val) {

      this.$refs[val].resetFields();
      this.listQuery.pageNum = 1;
    },

    handleAddUser(type) {
      this.isAdd = 'add';
      this.dialogVisible = true;
      this.formData= {
        type:2,
        payeename:"划转",
        createBy:localStorage.getItem('username'),
        createTime:dateUils.getCurrentDate()
      }
    },

    handleClose() {
      this.resetForm("dataForm");
      this.dialogVisible = false;
    },

    async handleUpdate(currentData, type) {
      this.isAdd = type;
      this.dialogVisible = true;
      //   一定要在打开弹窗前 再赋值 不然resetFiles没用
      await this.handleFormQuchange(currentData.districtId)


      this.$nextTick(() => {
        this.formData = { ...currentData, status: String(currentData.status) };

      });
    },

    handleDelete(id) {
      this.$confirm(
          "此操作将删除该条内容，请确认是否继续操作？",
          "删除提示",
          {
            confirmButtonText: "保 存",
            cancelButtonText: "取 消",
            type: "warning",
          }
      )
          .then(() => {
            delDetails(id).then(res => {
              Message({
                message: '操作成功',
                type: "success",
                duration: 5 * 1000,
              });
              this.getList();
            })
          })
          .catch(() => { });
    },
    /** 删除按钮操作 */
    handleDeletes(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delDetails(ids);
      }).then(() => {
        this.getList();
        Message({
          message: '操作成功',
          type: "success",
          duration: 5 * 1000,
        });
      })
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    hanldetype(row){
      if(row.type==1){
        return "银行"
      }
      if(row.type==2){
        return "POS"
      }
      if(row.type==3){
        return "微信"
      }
    }
  },
};
</script>

<style scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 180px;
}

::v-deep .el-dialog__body {
  padding: 30px 0;

}

.tableView {
  width: 100%;
  background: #F7F7F7;
  padding-top: 20px;
  padding-bottom: 20px;

.title {

  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: bold;
  font-size: 16px;
  color: #008C93;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.el-row {
  text-align: center;
  height: 50px;
  line-height: 50px;
  border: 1px solid #E9E9E9;
  background: #fff;

.el-col {
  height: 50px;
  border-right: 1px solid #E9E9E9;
}

.el-col:last-of-type {
  border-right: none;
}
}

.el-row:first-of-type {
  border-bottom: none;
  background: none;
}

.el-row:last-of-type {
  border-top: none;

.el-col {
  text-align: left;
  padding-left: 58px;
}
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form-item--mini .el-form-item__content,
.el-form-item--mini .el-form-item__label {
  line-height: 50px;
}



}
</style>
